{% extends 'base_tabler.html' %} {% block navname %}risk{% endblock %} {% block title %}青少年风险行为分析{% endblock %}
{% block content %}
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">青少年风险行为分析</h2>
        <div class="text-muted mt-1">基于调查数据的青少年风险行为分析与趋势预测</div>
      </div>
    </div>
  </div>
</div>

<!-- 风险分布与类型 -->
<div class="row mt-3">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">风险行为级别分布</h3>
      </div>
      <div class="card-body">
        <div id="risk_distribution_chart" style="width: 100%; height: 400px">{{ risk_distribution_chart|safe }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">风险行为类型分析</h3>
      </div>
      <div class="card-body">
        <div id="risk_types_chart" style="width: 100%; height: 400px">{{ risk_types_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 年龄与性别分析 -->
<div class="row mt-3">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">不同年龄段风险行为趋势</h3>
      </div>
      <div class="card-body">
        <div id="age_risk_chart" style="width: 100%; height: 400px">{{ age_risk_chart|safe }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">性别风险行为差异</h3>
      </div>
      <div class="card-body">
        <div id="gender_risk_chart" style="width: 100%; height: 400px">{{ gender_risk_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 风险因素与后果 -->
<div class="row mt-3">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">风险行为相关因素分析</h3>
      </div>
      <div class="card-body">
        <div id="risk_correlation_chart" style="width: 100%; height: 400px">{{ risk_correlation_chart|safe }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">风险行为可能导致的后果</h3>
      </div>
      <div class="card-body">
        <div id="risk_consequences_chart" style="width: 100%; height: 400px">{{ risk_consequences_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 风险趋势预测 -->
<div class="row mt-3">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">青少年风险行为趋势预测</h3>
      </div>
      <div class="card-body">
        <div id="risk_trend_chart" style="width: 100%; height: 400px">{{ risk_trend_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 风险洞察 -->
<div class="row mt-3">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">风险行为洞察与建议</h3>
      </div>
      <div class="card-body">
        {% for insight in risk_insights %}
        <div class="mb-4">
          <h4 class="card-subtitle mb-2 text-primary">{{ insight.title }}</h4>
          <p class="text-muted">{{ insight.content }}</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}
